<template>
	<page-router-view name="Users">
		<vxe-grid :data="table.rows" size="mini" border :columns="columns" highlight-hover-row>
			<div slot="toolbar" class=" d-flex">
				<div class="md-flex-item">
					<vxe-form @submit="onSearch">
						<vxe-form-item title="用户名">
							<vxe-input v-model="query.name" placeholder="通过用户名查询"></vxe-input>
						</vxe-form-item>
						<vxe-form-item>
							<v-btn type="submit" small class="mr-1">搜索</v-btn>
							<v-btn small color="success" @click="$refs.user.add()">新增</v-btn>
						</vxe-form-item>
					</vxe-form>
					<v-row>
						<v-col cols="4">
						</v-col>
					</v-row>
				</div>
				<div class="md-flex-right">
				</div>
			</div>
			<template #action="{row}">
				<v-btn small color="teal darken-1" class="mr-1" @click="onRole(row)">角色</v-btn>
				<v-btn small color="primary" class="mr-1" @click="onEdit(row)">编辑</v-btn>
				<v-btn small color="error" class="mr-1" @click="onDelete(row)">删除</v-btn>
			</template>
		</vxe-grid>
		<v-pagination v-model="query.page" :length="pageLength" class="my-5"/>
		<user-dialog ref="user" @success="onRefresh()"/>
		<user-role-dialog ref="role"/>
	</page-router-view>
</template>

<script>
import MdTableMixins from '@/common/mixins/MdTableMixins';
import UserApi from '@/common/api/UserApi';
import PageRouterView from '@/components/widget/PageRouterView';
import dayjs from 'dayjs';
import UserDialog from '@/views/admin/modules/UserDialog';
import UserRoleDialog from './modules/UserRoleDialog';

export default {
	components: {UserRoleDialog, UserDialog, PageRouterView},
	mixins: [MdTableMixins],
	data() {
		return {
			query: {
				name: undefined
			},
			loadFunc: () => {
				return UserApi.admin.list(this.query)
			},
			columns: [
				this.$utils.gto({type: 'seq', title: '#', width: 40}),
				this.$utils.gto({field: 'avatar', title: '头像', width: 50}),
				this.$utils.gto({field: 'username', title: '用户昵称'}),
				this.$utils.gto({field: 'email', title: '邮箱'}),
				this.$utils.gto({field: 'createdAt', title: '创建时间', formatter: ({cellValue}) => this.dateFormatter(cellValue)}),
				this.$utils.gto({field: 'updatedAt', title: '更新时间', formatter: ({cellValue}) => this.dateFormatter(cellValue)}),
				this.$utils.gto({field: 'action', title: '操作', width: 200, fixed: 'right', slots: {default: 'action'}})
			]
		}
	},
	methods: {
		onEdit(row) {
			this.$refs.user.edit(row);
		},
		onDelete(row) {
			this.$utils.onConfirm(`是否删除"${row.username}?`).then(() => {
				UserApi.admin.delete(row.id).then(res => {
					this.$utils.responseHandler(res, true, true).then(this.onSearch);
				})
			})
		},
		onRole(row) {
			this.$refs.role.edit(row);
		}
	}
}
</script>

<style scoped>

</style>